<template>
	<view class="customTabBarWrap">
		<view class="customTabBarItem" v-for="(item,key) in customTabBarLst" :key="key" :class="{'active':item.url === curUrl}" @click="changeTab(item.url)">
			<text class="iconfont customTabBarIcon" :class="item.icon"></text>
			<text>{{item.txt}}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'customTabBar',
	props:{
		curUrl:{
			type:String
		}
	},
	components: {
	},
	data() {
		return {
			customTabBarLst:[
				{
					icon:'icon-map',
					txt:'考勤打卡',
					url:'/pages/home/clockPage'
				},{
					icon:'icon-calendar',
					txt:'考勤统计',
					url:'/pages/home/myAttend'
				}
			]
		}
	},
	methods: {
		changeTab(url){
			uni.navigateTo({
				url,
				animationType: 'pop-in',
				animationDuration: 200
			})
		}
	},
	onReady(){
	    
	},
};
</script>

<style scoped lang="scss">
@import '@/static/css/base.scss';
.customTabBarWrap{
	position: fixed;
	z-index: 999999;
	bottom:0;
	left:0;
	right: 0;
	height: 104.16rpx;
	background-color: rgb(247, 247, 250);
	display: flex;
	align-items: center;
	.customTabBarItem{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		color:rgb(153, 153, 153);
		&.active{
			color:$themeColor;
		}
		.customTabBarIcon{
			font-size:41.66rpx;
		}
	}
}
</style>
